<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <style type="text/css">
    .header span{background:#009688;margin-left:5px;padding:10px;color:#ffffff;}
    .header li{border-bottom:solid 2px #009688;margin-top: 8px;}
    .header button{float:right;margin-top:8px;}
  </style>
  <script type="text/javascript">
    var paixu=0;
  </script>
</head>
<body style="padding:10px; box-sizing: border-box;">
<div class="header">

<div class="layui-form">
  <span>导航列表</span>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <select lay-filter="Select">
          <!-- <option value="">全部</option> -->
          {if(empty($class))}
          <option value="">待创建分类</option>
          {else/}
          {foreach($class as $class_v)}
          {if($class_v['parent_id']==0)}
          {if($id==$class_v['id'])}
          <option value="{$class_v['id']}" selected>{$class_v['title']}</option>
          {else/}
          <option value="{$class_v['id']}">{$class_v['title']}</option>
          {/if}
          <!-- 显示该主分类下的二级分类 -->
          {foreach($class as $sub_class)}
          {if($sub_class['parent_id']==$class_v['id'])}
          {if($id==$sub_class['id'])}
          <option value="{$sub_class['id']}" selected>&nbsp;&nbsp;&nbsp;&nbsp;{$sub_class['title']}</option>
          {else/}
          <option value="{$sub_class['id']}">&nbsp;&nbsp;&nbsp;&nbsp;{$sub_class['title']}</option>
          {/if}
          {/if}
          {/foreach}
          {/if}
          {/foreach}
          {/if}
        </select>
      </div>
    </div>
  <button type="button" class="layui-btn layui-btn-sm" onclick="add({$id})">
    <i class="layui-icon layui-icon-addition"></i> 添加</button>
</div>
  <li></li>
</div>
<table class="layui-table">
  <thead>
  <tr>
    <th>导航名</th>
    <th>介绍</th>
<!--    <th>地址</th>-->
    <th>排序</th>
    <th>状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  {foreach($lists as $lists_v)}
    <tr>
      <td>
        {if($lists_v['parent_id']==0)}
        <div style="text-align:left">{$lists_v['title']}</div>
        {else/}
        <div style="text-align:left; padding-right:20px">　　{$lists_v['title']}</div>
        {/if}
      </td>
      <!-- <td style="text-align: {$lists_v['parent_id']==0 ? 'left' : 'right'}">{$lists_v['title']}</td> -->
      <td>{$lists_v['mtitle']}</td>
<!--      <td>{$lists_v['url']}</td>-->
      <td>{$lists_v['sort']}</td>
      <td>
        {if($lists_v['show']==0)}
        <div style="color:#08ff00">显示</div>
        {else/}
        <div style="color:#ff0000">隐藏</div>
        {/if}
      </td>
      <td>
        <button type="button" class="layui-btn layui-btn-xs" onclick="dit({$lists_v['id']})">修改</button>
        <button type="button" class="layui-btn layui-btn-xs" onclick="del({$lists_v['id']})">删除</button>
      </td>
      <script type="text/javascript">
        var paixu={$lists_v['sort']}+100;
      </script>
    </tr>
  {/foreach}
  </tbody>
</table>
</body>
<script type="text/javascript">
  layui.use(['layer','form'], function(){
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form;

    // 页面加载时，如果没有选择分类，则默认选择第一个主分类
    var currentId = '{$id}';
    if(currentId == '' || currentId == '0') {
      // 获取第一个主分类的ID
      var firstMainCategoryId = '';
      $('select[lay-filter="Select"] option').each(function() {
        if($(this).val() != '' && $(this).text().indexOf('&nbsp;') == -1 && firstMainCategoryId == '') {
          firstMainCategoryId = $(this).val();
          return false;
        }
      });
      
      if(firstMainCategoryId != '') {
        // 跳转到第一个主分类
        location.href = "/admin/daohang?id=" + firstMainCategoryId;
      }
    }

    //下拉点击事件
    form.on('select(Select)',function(data){
      location.href="/admin/daohang?id="+data.value;
      sessionStorage.setItem('fenlei', data.value);
    });

    // 监听修改操作的回调
    window.ditCallback = function() {
      window.location.reload();
    }
  });
  function add(fenlei){
    //   console.log('分类'+fenlei);
    //   console.log('排序'+paixu);
    layer.open({
      type:2,
      title:'添加导航',
      shade:0.3,
      content: '/admin/daohangadd?fenlei='+fenlei+'&paixu='+paixu,
      area: ['450px', '550px']
    })
  }
  function dit(id){
    layer.open({
      type: 2,
      title: '修改导航',
      shade: 0.3,
      content: '/admin/daohangdit?id='+id,
      area: ['450px', '550px'],
      end: function() {
        if(typeof window.ditCallback === 'function') {
          window.ditCallback();
        }
      }
    })
  }
  function del(id){
    layer.open({
      title:'删除',
      content: '是否删除导航？',
      shade:0.3,
      btn: ['确认', '取消'],
      yes: function(){
        $.get('/admin/daohangdel?id='+id,
                function(res){
                  console.log(res);
                  if (res.code==0) {
                    layer.msg(res.msg,{"icon":1});
                    setTimeout(function () {
                      window.location.reload();
                    },1000)
                  } else {
                    layer.msg(res.msg,{"icon":2});
                  }
                }, "json");
      }
    })
  }
  </script>
</html>